<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .box{
                width: 200px;
                height: 100px;
                /* background: #ffffaa; */
                /* position:relative; */

        }
        .box1{
                display: inline-block;
                width: 60px;
                height: 50px;
                /* background: #ffccaa; */
                margin: 1px;
                float: left;
        }
        .box::before {
                position:absolute;
                display:inline-block;
                top:10px;
                left:40px;
                margin-top:-5.5px;
                width:0;
                height:0;
                content:'';
                border-style:solid;
                border-width:5px;
                border-color:rgb(0, 0, 0) rgb(3, 3, 3) transparent transparent;
                transform:rotate(-45deg);
                box-shadow:1px -1px 1px #000;
                z-index: 999;
        }
      </style>
</head>
<body>
        <div class="box">
                <div class="box1">1</div>
                <div class="box1">2</div>
                <div class="box1">3</div>
                <div class="box1">4</div>
                <div class="box1">5</div>                  
          </div>
</body>
</html>